<template>
    <div class="global">
        <div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

                <el-breadcrumb-item>个人中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="my">
            <div class="left">
                <div class="avatar" style="position: relative;">
                    <div style="text-align: center;"><img v-if="userinfo.avatar !== ''"
                            :src="'/api/file/getImage/' + userinfo.avatar" alt="">
                        <img src="../assets/default.png" v-else style="width: 120px;height: 120px;border-radius: 50%;"
                            alt="">
                    </div>
                    <div style="text-align: center;">{{ userinfo.nickName }}</div>
                    <div>{{ userinfo.personDescription }}</div>
                    <div style="position: absolute; top: 0px;right: 0px;">
                        <el-button type="text" @click="editzl" v-if="userinfo.userId == userId">修改资料</el-button>
                    </div>

                </div>
                <div class="count">
                    <div class="countitem">
                        <div>积分</div>
                        <div>{{ userinfo.currentIntegral }}</div>
                    </div>
                    <div class="countitem">
                        <div>获赞</div>
                        <div>{{ userinfo.likeCount }}</div>
                    </div>
                    <div class="countitem">
                        <div>发帖</div>
                        <div>{{ userinfo.postCount }}</div>
                    </div>
                    <div class="countitem">
                        <div>加入</div>
                        <div>{{ userinfo.joinTime }}</div>
                    </div>


                </div>
            </div>
            <div class="right">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="发帖" :name="0"></el-tab-pane>
                    <el-tab-pane label="评论" :name="1"></el-tab-pane>
                    <el-tab-pane label="点赞" :name="2"></el-tab-pane>
                </el-tabs>
                <div class="articlelist" v-for="item in articlelist">
                    <div>
                        <div> <img src="../assets/default.png" v-if="item.avatar == null"
                                style="width: 20px;height: 20px;" alt=""> <span style="color: #4e5969;" class="hover">{{
                                    item.nickName }}</span><el-divider direction="vertical"></el-divider>
                            <span style="color: #4e5969;">{{ item.postTime }}{{ item.userIpAddress }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span style="color: #4e5969;">{{ item.pBoardName }} </span>
                            <span v-if="item.boardName">/{{ item.boardName }}</span>

                        </div>

                        <div @click="detail(item.articleId)"
                            style="margin-top: 10px;color: #4a4a4a;font-weight: bold;cursor: pointer;" class="hover"> {{
                                item.title }}
                        </div>
                        <div style="margin-top: 10px;">{{ item.summary }}</div>
                        <div class="article-info" style="margin-top: 10px;">
                            <span class="iconfont icon-eye-solid" style="margin-right: 10px;">
                                {{ item.readCount == 0 ? '阅读' : item.readCount }}
                            </span>
                            <span class="iconfont icon-good" style="margin-right: 10px;">
                                {{ item.goodCount == 0 ? '点赞' : item.goodCount }}
                            </span>
                            <span class="iconfont icon-comment">
                                {{ item.commentCount == 0 ? '评论' : item.commentCount }}
                            </span>

                        </div>
                    </div>

                    <div>
                        <img v-if="item.cover !== '' && item.cover !== null" style="width: 100px;height: 100px;"
                            :src="'/api/file/getImage/' + item.cover" />
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="修改资料" width="500" :append-to-body="true" :close-on-click-modal="false"
            :close-on-press-escape="false" :before-close="handleClose1" :model-value="visible">
            <el-form :model="form" ref="registerform" label-width="auto" :rules="rules" style="max-width: 600px">
                <el-form-item label="昵称" prop="email">
                    {{ userinfo.nickName }}
                </el-form-item>
                <el-form-item label="头像" prop="cover">
                    <el-upload name="file" :show-file-list="false"
                        accept=".png,.PNG,.jpg,.JpG,.jpeg,.JPEG,gif,.GIF,.bmp,.BMP" :multiple="false"
                        :http-request="selectImg">
                        <img :src="commentImage" v-if="commentImage !== ''" style="width: 100px;height: 100px;" alt="">
                      
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>


                    </el-upload>
                </el-form-item>

                <el-form-item label="简介" prop="personDescription">
                    <el-input v-model="form.personDescription" type="textarea" />
                </el-form-item>

                <el-form-item label="性别" prop="password">
                    <el-select v-model="form.sex">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="0"></el-option>
                    </el-select>
                </el-form-item>



            </el-form>

            <el-button type="primary" @click="submit()" style="width: 100%;">
                确定
            </el-button>
        </el-dialog>
    </div>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue';
import { useStore } from 'vuex';


import service from '../utils/request';
import { useRoute } from 'vue-router';
import router from '../router';
import { fa } from 'element-plus/es/locales.mjs';
const store = useStore();
const userinfo = ref({});
const { proxy } = getCurrentInstance();
const articlelist = ref([]);
const route = useRoute();
const visible = ref(false)
const form=ref({})
const commentImage = ref("")
const activeName = ref(0)
const userId=ref("");
onMounted(() => {
    console.log(route.query.userId)
    console.log(store.state)
    getuserinfo()
    getarticle()
})
const selectImg = (file) => {
    console.log(file)
    file = file.file;
    let img = new FileReader();

    img.readAsDataURL(file);
    console.log(file)

    img.onload = ({ target }) => {
        let imgData = target.result;
        commentImage.value = imgData;
        form.value.avatar = file;
    };

}
const editzl = () => {
    form.value = {};
    form.value.personDescription=userinfo.value.personDescription
    form.value.sex=userinfo.value.sex
    if( userinfo.value.avatar !== ''){
        commentImage.value ='/api/file/getImage/'+ userinfo.value.avatar
        
    }else{
        commentImage.value =""
 
    }
    visible.value = true
}
const submit = async () => {
    const res = await proxy.Request({
        url: "/user/updateuserinfo",
        params: {
            sex: form.value.sex,
            personDescription: form.value.personDescription,
            avatar: form.value.avatar
        }
    })
   visible.value=false;
   getuserinfo()

}
const detail = (id) => {
    router.push({
        path: "/detail/" + id
    })
}
const handleClick = (e) => {
    console.log(e.index)
    activeName.value = Number(e.index)
    getarticle()

}
const getarticle = async () => {
    const res = await service.get("/user/loadarticle", {
        params: {
            userId: route.query.userId,
            type: activeName.value
        }
    })
    console.log(res)
    articlelist.value = res.data.records
}
const getuserinfo = async () => {
    const res = await service.get("/user/info", {
        params: {
            userId: route.query.userId
        }
    });
    console.log(res)
    userinfo.value = res.data
    console.log(userinfo.value)
    userId.value = store.state.userInfo.userId;
}
</script>
<style>
.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    border: 1px dashed #8c939d;
}
</style>
<style scoped>
.countitem {
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
}

.count {
    margin-top: 10px;
    background: #fff;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.left {
    width: 300px
}

.avatar {
    width: 100%;
    background: #fff;
}

.my {
    width: 100%;
    display: flex;
    margin-top: 10px;

}

.global {
    width: 70%;
    margin: 0 auto;
    padding: 10px 0px;
    box-sizing: border-box;
}

.right {
    width: calc(100% - 320px);
    margin-left: 20px;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
}


.articlelist {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    display: flex;
    background: #fff;
    padding-bottom: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    justify-content: space-between;
}

.active {
    color: #007fff !important;
}

.article {
    width: 100%;
    height: auto;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.active {

    color: #007fff;
}
</style>